<template>
    <div class="PersonalData">
        <van-nav-bar
        title="个人资料"
        left-text="返回"
        left-arrow
        @click-left="back"
        />
       <Bg>
          <div class="data-box">
              <div class="data-con">
                  <div>头像</div>
                  <div class="img">
                      <div class="uploader"><van-uploader :max-size="500 * 1024" :after-read="uploadAvatar" /></div>
                      <img :src="findAccountInfolist.userImg" alt="">
                      </div>
              </div>
              <div class="data-con">
                  <div>用户id</div>
                  <div class="t">{{findAccountInfolist.userId}}</div>
              </div>
              <div class="data-con">
                  <div>昵称</div>
                  <div class="t">{{findAccountInfolist.nickName}}</div>
              </div>
              <div class="data-con">
                  <div>简介</div>
                  <div class="t">{{findAccountInfolist.desc ? findAccountInfolist.desc : '这家伙很懒，什么都没留下。'}}</div>
              </div>
          </div>
       </Bg>
    </div>
</template>

<script>
import Bg from "../components/bg";
import "../assets/less/PersonalData.less";
    export default {
        name:'PersonalData',
        data(){
            return{
                //用户信息
                findAccountInfolist:{},
            }
        },
        components: {
            Bg,
        },
        created(){
            this.findAccountInfo();
        },
        methods:{
            //返回上一级
            back() {
            this.$router.go(-1);
            },
            //获取用户信息
            findAccountInfo() {
            let tokenString = this.$cookies.get("tokenString");

            if (!tokenString) {
                console.log("浏览器token不存在");
                return this.$router.push({ name: "Login" });
            }

            this.$toast.loading({
                message: "加载中...",
                forbidClick: true,
                duration: 0,
            });

            this.axios({
                //请求方式
                method: "GET",
                url: this.baseUrl + "/findAccountInfo",
                params: {
                appkey: this.appkey,
                tokenString,
                },
            })
                .then((res) => {
                // console.log("res findAccountInfo ==> ", res);
                this.$toast.clear();

                if (res.data.code == 700) {
                    this.$toast({
                    message: res.data.msg,
                    forbidClick: true,
                    duration: 3000,
                    });
                    return this.$router.push({ name: "Login" });
                }

                if (res.data.code === "B001") {
                    this.findAccountInfolist = res.data.result[0];
                    console.log(this.findAccountInfolist)
                } else {
                    this.$toast({
                    message: res.data.msg,
                    forbidClick: true,
                    duration: 3000,
                    });
                }
                })
                .catch((err) => {
                this.$toast.clear();
                console.log("err ==> ", err);
                });
            },
                //上传头像
            uploadAvatar(file) {
            // console.log("file ==> ", file);

            //限制上传文件类型
            let types = ["png", "gif", "jpg", "jpeg"];

            //截取上传图片的类型
            let type = file.file.type.split("/")[1];
            console.log("type ==> ", type);

            if (types.indexOf(type) === -1) {
                return this.$toast({
                message: `文件类型只支持${types.join(",")}`,
                forbidClick: true,
                duration: 3000,
                });
            }

            //处理base64
            let base64 = file.content.replace(/data:image\/[A-Za-z]+;base64,/, "");

            // console.log('base64 ==> ', base64);

            //发起上传图片请求
            let tokenString = this.$cookies.get("tokenString");

            if (!tokenString) {
                console.log("浏览器token不存在");
                return this.$router.push({ name: "Login" });
            }

            this.$toast.loading({
                message: "加载中...",
                forbidClick: true,
                duration: 0,
            });

            this.axios({
                //请求方式
                method: "POST",
                url: this.baseUrl + "/updateAvatar",
                data: {
                appkey: this.appkey,
                tokenString,
                imgType: type,
                serverBase64Img: base64,
                },
            })
                .then((res) => {
                console.log("res uploadAvatar ==> ", res);
                this.$toast.clear();

                if (res.data.code == 700) {
                    this.$toast({
                    message: res.data.msg,
                    forbidClick: true,
                    duration: 3000,
                    });
                    return this.$router.push({ name: "Login" });
                }

                if (res.data.code === "H001") {
                    if (res.data.result[0] === 1) {
                    this.userInfo.userImg = res.data.userImg;
                    }
                }
                this.$toast({
                    message: res.data.msg,
                    forbidClick: true,
                    duration: 3000,
                });
                })
                .catch((err) => {
                this.$toast.clear();
                console.log("err ==> ", err);
                });
            },
        }
    }
</script>
